<template>
	<view class="content">
		<updateAppPop></updateAppPop>
		<u-datetime-picker :show="showDate" v-model="date" mode="year-month" closeOnClickOverlay @confirm="confirmDate"
			@cancel="showDate = false" @close="showDate = false"></u-datetime-picker>
		<view class="tab-bar" :style="{ paddingTop: `calc(20rpx + ${statusBarHeight}px)` }">
			<view class="title">专业管理</view>
			<view class="info">
				<view class="notice" @click="godetails()">
					<div class="count">{{ total_unread }}</div>
					<view class="iconfont icon-bell"></view>
				</view>
				<view class="logo">
					<image mode="aspectFill" src="../../src/imgs/test.jpg"></image>
				</view>
			</view>
		</view>
		<view class="section section-0">
			<view class="top">
				<view class="left" @click="go({ path: '/pages/statistics/overall/index' })">
					<text>工程统计</text>
					<view class="iconfont icon-xiangyou1"></view>
				</view>
				<view class="right">
					<text class="text-label">在建：</text>
					<text class="text-value" style="margin-right: 35rpx;">{{ analysis.build_num }}</text>
					<text class="text-label">停工：</text>
					<text class="text-value">{{ analysis.stop_num }}</text>
				</view>
			</view>
		</view>
		<view class="section section-1">
			<view class="section-body">
				<view class="date-picker" v-if="false" @click="showDate = true">
					{{ formattedDate }}
					<text class="iconfont icon-xiala"></text>
				</view>
				<view class="top-tab">
					<view :class="`item ${curChartsTab.type === item.type ? 'item__active' : ''}`"
						@click="setCurChartsTab(item)" v-for="item in chartsTabList" :key="item.type">
						{{ item.name }}
						<view class="shape"></view>
					</view>
				</view>
				<view class="charts">
					<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts"
						class="echarts"></view>
				</view>
				<!-- <button @click="preview()">预览</button> -->
				<!-- <button @click="go('/pages/pdf/index');">预览</button> -->
				<view class="project-process" @click="go({ path: '/pages/statistics/project/index' })">
					<image src="../../src/imgs/statistics-project.png" mode="aspectFit"></image>
				</view>
				<view class="charts">
					<view :prop="option2" :change:prop="echarts.updateEcharts2" id="echarts2" class="echarts"></view>
				</view>
				<view class="today">
					<view class="left">
						<text>当日作业情况</text>
					</view>
					<view class="right">
						<view class="iconfont icon-caidan"></view>
					</view>
				</view>
				<view class="board">
					<view class="item" @click="go(item)" v-for="item in todayList" :key="item.id">
						<image mode="aspectFit" :src="item.icon"></image>
						<view class="desc">
							<text class="num">{{ analysis[item.count] }}</text>
							<text>个</text>
						</view>
					</view>
				</view>
				<view class="tab-list">
					<view class="left">
						<view class="top-wrapper">
							<view class="shape"></view>
							<view
								:class="`item ${curTab.id === item.id ? 'item__active' : ''} ${item.disabled ? 'item__disabled' : ''}`"
								@click="setCurTab(item)" v-for="item in tabList.slice(0, 4)" :key="item.name">
								<view class="icon">
									<image :src="item.icon" mode="aspectFit"></image>
								</view>
								<view class="name" v-if="item.id!==10">
									{{ item.name }}
									<br />
									管理
								</view>
								<view class="partyBuilding" v-else>
									{{ item.name }}
								</view>
							</view>
						</view>
						<view class="bottom-wrapper">
							<view class="six">
								<image src="../../src/imgs/six.png"></image>
							</view>
							<view class="shape"></view>
							<view
								:class="`item ${curTab.id === item.id ? 'item__active' : ''} ${item.disabled ? 'item__disabled' : ''}`"
								@click="setCurTab(item)" v-for="item in tabList.slice(4, tabList.length)"
								:key="item.name">
								<view class="icon">
									<image :src="item.icon" mode="aspectFit"></image>
								</view>
								<view class="name">
									{{ item.name }}
									<br />
									管理
								</view>
							</view>
						</view>
					</view>
					<view class="mid"></view>
					<view class="right">
						<view @click="go(item)" :class="`item ${item.disabled ? 'item__disabled' : ''}`"
							v-for="item in tabChildList[curTab.id]" :key="item.name">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" :round="20" :closeOnClickOverlay="false" mode="center" @open="open">
			<view class="tankuang" v-for="(item, index) in listTitle" :key="index">
				<view class="rise">消息提示</view>
				<view class="title">
					{{ item.title }}
				</view>
				<view class="content">
					<view class="text">{{ item.msg }}</view>
					<!-- <view class="details" @click="view_Details(item)">查看详情>></view> -->
				</view>
				<view class="button">
					<button @click="later(item)">暂不提醒</button>
					<button @click="view_Details(item)">查看详情</button>
				</view>
			</view>
		</u-popup>
		<!-- <button @click="handleGuide">21331</button> -->
	</view>
</template>

<script>
	import updateAppPop from '@/components/update_app_pop/index.vue'
	import {
		projectCityApi
	} from '@/api/project.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		projectAnalysisApi,
		projectChartsApi,
		UserMsgListApi,
		UserMsgReadApi
	} from '@/api/statistics.js'
	import tabbar from '@/components/tabbar/index.vue'
	export default {
		components: {
			tabbar,
			updateAppPop
		},
		data() {
			return {
				total_unread: '',
				listTitle: [{
					title: '',
					msg: '',
					id: ''
				}],
				resTotalUser: 0,
				times: null,
				times2: null,
				analysis: {
					build_num: 0,
					people_num: 0,
					risk_num: 0,
					stop_num: 0,
					td_num: 0,
					zrr_num: 0
				},
				statusBarHeight: 0,
				todayList: [{
						id: 1,
						icon: require('../../src/imgs/statistics-board-1.png'),
						path: '/pages/statistics/today/risk/index?type=1',
						count: 'risk_num'
					},
					// { id: 1, icon: require('../../src/imgs/statistics-board-1.png'), path: '/pages/statistics/today/risk/Risk-statistics?type=1', count: 'risk_num' },
					{
						id: 2,
						icon: require('../../src/imgs/statistics-board-2.png'),
						path: '/pages/statistics/today/outage/index?type=all',
						count: 'td_num'
					},
					{
						id: 3,
						icon: require('../../src/imgs/statistics-board-3.png'),
						path: '/pages/statistics/today/group/index',
						count: 'zrr_num'
					},
					{
						id: 4,
						icon: require('../../src/imgs/statistics-board-4.png'),
						path: '/pages/statistics/today/member/index',
						count: 'people_num'
					}
				],
				curTab: {
					id: 1
				},
				tabList: [{
						id: 1,
						name: '综合',
						icon: require('../../src/imgs/statistics-tab-cion1.png')
					},
					{
						id: 7,
						name: '物资',
						icon: require('../../src/imgs/statistics-tab-cion7.png')
					},
					{
						id: 9,
						name: '创新',
						icon: require('../../src/imgs/statistics-tab-cion9.png')
					},
					{
						id: 10,
						name: '党建+',
						icon: require('../../src/imgs/statistics-tab-cion10.png')
					},
					{
						id: 3,
						name: '安全',
						icon: require('../../src/imgs/statistics-tab-cion3.png')
					},
					{
						id: 4,
						name: '质量',
						icon: require('../../src/imgs/statistics-tab-cion4.png')
					},
					{
						id: 2,
						name: '进度',
						icon: require('../../src/imgs/statistics-tab-cion2.png')
					},
					{
						id: 5,
						name: '技术',
						icon: require('../../src/imgs/statistics-tab-cion5.png')
					},
					{
						id: 6,
						name: '造价',
						icon: require('../../src/imgs/statistics-tab-cion6.png')
					},
					{
						id: 8,
						name: '队伍',
						icon: require('../../src/imgs/statistics-tab-cion8.png')
					}
				],
				tabChildList: {
					1: [{
							id: '1-1',
							name: '履职颗粒度',
							path: '/pages/statistics/comprehensive/duty/index'
						},
						{
							id: '1-7',
							name: '检查汇总',
							path: '/pages/statistics/comprehensive/duty/questlist'
						},
						{
							id: '1-8',
							name: '会议汇总',
							path: '/pages/statistics/comprehensive/duty/huiyilist'
						},
						{
							id: '1-2',
							name: '经验分享',
							path: '/pages/statistics/comprehensive/share/index'
						},
						{
							id: '1-3',
							name: '标准规范',
							path: '/pages/statistics/comprehensive/rule/index?type=标准规范'
						},
						// { id: '1-3', name: '公司发文', path: '/pages/statistics/comprehensive/rule/index?type=公司发文' },
						// {id: '1-4', name: '会议督办', disabled: true},
						// {id: '1-5', name: '问题库', disabled: true},
						// {id: '1-5', name: '问题库', path:'/pages/issus/issus/issus'},
						// {id: '1-6', name: '图纸问题库', disabled: true},
						{
							id: '1-6',
							name: '通讯录',
							path: '/pages/statistics/comprehensive/mail_list/index'
						},
						{
							id: '1-5',
							name: '技术标准',
							path: '/pages/statistics/comprehensive/rule/technicalDocumentation'
						},
						// {id: '1-8', name: '安全问题库', disabled: true},
						// {id: '1-9', name: '项目问题库', disabled: true},
					],
					2: [
						// {id: '2-1', name: '项目清单',path: '/pages/statistics/project/index'},
						// {id: '2-1', name: '项目清单',disabled: true},
						{
							id: '2-6',
							name: '可研批复',
							path: '/pages/statistics/early/feasible/index'
						},
						{
							id: '2-7',
							name: '核准批复',
							path: '/pages/statistics/early/Approved/index'
						},
						{
							id: '2-8',
							name: '前期资料文件',
							path: '/pages/statistics/early/file/index'
						},
						{
							id: '2-5',
							name: '四通一平',
							path: '/pages/statistics/fourWay/index'
						},
						{
							id: '2-1',
							name: '任务计划书',
							path: '/pages/statistics/project/index'
						},
						{
							id: '2-2',
							name: '在建工程进度',
							path: '/pages/statistics/progress/schedule/index'
						},
						// { id: '2-3', name: '工程周报', disabled: true },
						{
							id: '2-4',
							name: '政处问题',
							path: '/pages/statistics/progress/Political/index'
						},
					],
					3: [{
							id: '3-2',
							name: '风险统计表',
							path: '/pages/statistics/today/risk/index?type=1'
						},
						{
							id: '3-3',
							name: '安全问题汇总',
							path: '/pages/statistics/safety/problem/index'
						},
						// {id: '3-5', name: '安委会',disabled: true},
						// {id: '3-6', name: '作业票',disabled: true},
						{
							id: '3-6',
							name: '作业票',
							path: '/pages/statistics/safety/ticket/index'
						},
						{
							id: '3-7',
							name: '违章库',
							path: '/pages/statistics/safety/violation/index'
						}
						// {id: '3-8', name: '停电计划', path: '/pages/statistics/today/outage/index?type=all'},

						// {id: '2-8', name: '摄像头', disabled: true},
					],
					4: [{
							id: '4-1',
							name: '创优策划',
							path: '/pages/statistics/quality/excellence/index'
						},
						// { id: '4-1', name: '创优策划', disabled: true },
						// {id: '4-2', name: '质量监督', disabled: true},
						{
							id: '4-3',
							name: '质量问题汇总',
							path: '/pages/statistics/quality/summary/index'
						},
						// { id: '4-4', name: '标准工艺库', disabled: true },
						// { id: '4-4', name: '标准工艺', path: '/pages/statistics/quality/workmanship/index' },

						{
							id: '4-5',
							name: '工序样板清单',
							path: '/pages/statistics/today/risk/progressModel'
						}
					],
					5: [{
							id: '5-1',
							name: '可研和初步设计管理',
							path: '/pages/statistics/technology/preliminary/list'
						},
						{
							id: '5-6',
							name: '停电计划',
							path: '/pages/statistics/today/outage/index?type=all'
						},
						// {id: '5-2', name: '设计管理', path:'/pages/statistics/technology/dynamic'},
						{
							id: '5-2',
							name: '施工图纸',
							path: '/pages/statistics/technology/drawings/index'
						},
						{
							id: '5-3',
							name: '设计问题',
							path: '/pages/statistics/technology/design/design'
						},
						{
							id: '5-4',
							name: '施工方案',
							// path: '/pages/work/manager/construction/const_plan/index',
							disabled: true
						},
						{
							id: '5-5',
							name: '精益化对接',
							disabled: true
						},
						
					],
					6: [{
							id: '6-1',
							name: '财务预算',
							path: '/pages/statistics/manufacture/budget/index'
						},
						{
							id: '6-2',
							name: '结算典型经验',
							path: '/pages/statistics/manufacture/settlement/index'
						},
						{
							id: '6-3',
							name: '服务合同支付',
							path: '/pages/statistics/contract/index'
						},
						{
							id: '6-4',
							name: '技经管控卡',
							path: '/pages/statistics/manufacture/Technical/Technical'
						},
						{
							id: '6-5',
							name: '变更与签证',
							disabled: true
						},
						{
							id: '6-6',
							name: '结算审计',
							disabled: true
						}
					],
					7: [{
							id: '7-1',
							name: '招标批次',
							path: '/pages/statistics/material/Biddingbatch/Biddingbatch'
						},
						{
							id: '7-2',
							name: '甲供物资清单',
							path: '/pages/work/manager/construction/material_gzt/list_of_material_Party/jiagongMaterial'
						},

						{
							id: '7-3',
							name: '服务合同台账',
							disabled: true
						},
						{
							id: '7-4',
							name: '物资库存清单',
							path: '/pages/statistics/material/inventory_List/index'
						}
					],
					8: [

						{
							id: '8-1',
							name: '队伍管理',
							path: '/pages/work/manager/construction/safety/teamManagement/teamManagement'
						},
						{
							id: '8-2',
							name: '人员管理',
							path: '/pages/statistics/group/people/index'
						},
						{
							id: '8-3',
							name: '人员评价',
							path: '/pages/statistics/safety/team/people/index'
						},
						{
							id: '8-4',
							name: '参建单位评价',
							path: '/pages/statistics/safety/team/point/ranks?type=参建单位评价'
						},
						{
							id: '8-5',
							name: '分包队伍评价',
							path: '/pages/statistics/safety/team/point/ranks?type=分包队伍评价'
						}
					],
					9: [{
							id: '9-1',
							name: '博士工作站',
							path: '/pages/statistics/bsprogress'
						},
						{
							id: '9-2',
							name: '科技项目',
							path: '/pages/statistics/technology_projects/index'
						}
						// {id: '9-2', name: '科技项目', path: '/pages/statistics/management/technology_projects'},
						// {id: '9-3', name: '群众性创新', disabled: true},
						// {id: '9-4', name: 'QC', disabled: true},
					],
					10: [{
						id: '10-1',
						name: '党建+基建',
						path: '/pages/statistics/partyBuilding/partyBuilding'
					}]
				},
				option: {},
				option2: {},
				showDate: false,
				date: '',
				show: false,
				formattedDate: '',
				chartsTabList: [{
						name: '数量',
						type: '1'
					},
					{
						name: '变电规模',
						type: '2'
					},
					{
						name: '线路',
						type: '3'
					}
				],
				curChartsTab: {
					name: '数量',
					type: '1'
				}
			}
		},
		computed: {
			...mapGetters({
				userInfo: 'system/getUserInfo'
			})
		},
		methods: {
			handleGuide() {
				let latitude = 116.397128;
				let longitude = 39.916527;
				let name = '地点'
				if (plus.os.name == "Android") { //判断是安卓端
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "腾讯地图"
						}, {
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						console.log('longitude', longitude)
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
								// lat, [Number] 31.348346
								// lon, [Number] 121.426474
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
								break;
							case 2:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							case 3:
								url =
									`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							//plus.runtime.openURL(url,function(e){})调起手机APP应用
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				} else {
					uni.openLocation({
						latitude: 116.397128,
						longitude: 39.916527
					})
				}

			},
			setCurChartsTab(item) {
				this.curChartsTab = item
				this.projectCharts()
			},
			formatDate(timeStamp) {
				const date = new Date(timeStamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				const Y = date.getFullYear() + '年'
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月'
				const D = date.getDate() + '日'
				const h = date.getHours() + ':'
				const m = date.getMinutes() + ':'
				const s = date.getSeconds()
				return Y + M
			},
			setCurTab(item) {
				this.curTab = item
			},
			confirmDate(val) {
				const timeStamp = val.value
				this.formattedDate = this.formatDate(timeStamp)
				this.showDate = false
				this.projectCharts()
			},
			changeOption() {
				const data = this.option.series[0].data
				// 随机更新示例数据
				data.forEach((item, index) => {
					data.splice(index, 1, Math.round(Math.random() * 40))
				})
			},
			onViewClick(options) {
				// uni.navigateTo({
				// 	url: '/pages/statistics/charts_data/index'
				// })
			},
			go(item) {
				uni.navigateTo({
					url: item.path
				})
			},

			onEchartSelect(res) {
				if (res.res.selected && res.res.selected.length) {
					let city = []
					res.res.selected[0].dataIndex.forEach(item => {
						city.push(this.option2.xAxis.data[item])
					})
					city = city.join(',')
					let index = res.res.selected[0].dataIndex[0]
					uni.navigateTo({
						url: `/pages/statistics/project/index?city=${city}&index=${index}`
					})
				}
			},
			onProgressSelect(res) {
				if (res.res.selected && res.res.selected.length) {
					//是投产还是开工
					let dataIndex = res.res.fromActionPayload.dataIndexInside
					//第几个柱形图
					let seriesIndex = res.res.fromActionPayload.seriesIndex
					let type = ''
					if (seriesIndex == 0 && dataIndex == 1) {
						type = 1
					} else if (seriesIndex == 1 && dataIndex == 1) {
						type = 2
					} else if (seriesIndex == 2 && dataIndex == 1) {
						type = 3
					} else if (seriesIndex == 0 && dataIndex == 0) {
						type = 4
					} else if (seriesIndex == 1 && dataIndex == 0) {
						type = 5
					} else if (seriesIndex == 2 && dataIndex == 0) {
						type = 6
					}
					uni.navigateTo({
						url: `/pages/statistics/progress/info/index?type=${type}`
					})

				}
			},
			async projectAnalysis() {
				// uni.showLoading({ title: '加载中...' })
				const {
					data
				} = await projectAnalysisApi()
				uni.hideLoading()
				if (data.code === 1) {
					this.analysis = data.data
				}
			},
			async projectCharts() {
				// uni.showLoading({ title: '加载中...' })
				const {
					data
				} = await projectChartsApi({
					year: new Date().getFullYear(),
					month: new Date().getMonth() + 1,
					type: this.curChartsTab.type
				})
				uni.hideLoading()
				if (data.code === 1) {
					const res = data.data
					let unit = ''
					let grid = '20px'
					if (this.curChartsTab.type === '2') {
						unit = '万千伏'
						grid = '70px'
					} else if (this.curChartsTab.type === '3') {
						unit = '公里'
						grid = '50px'
					}
					this.option = {
						grid: {
							left: '0',
							right: grid,
							bottom: '0',
							top: '30px',
							containLabel: true
						},
						tooltip: {},
						legend: {
							show: true,
							left: 'left',
							textStyle: {
								fontSize: 12
							}
						},
						yAxis: {
							data: ['开工', '投产'],
							type: 'category',
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								// interval: 0,
								// rotate: 40,
								textStyle: {
									color: '#3b3c40',
									fontSize: 12
								}
							}
						},
						xAxis: {
							type: 'value',
							axisLine: {
								show: false
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: '#d9d9d7',
									type: 'dashed'
								}
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false,
								textStyle: {
									color: '#3b3c40',
									fontSize: 12
								}
							}
						},
						series: [{
								name: '计划',
								type: 'bar',
								data: [],
								barWidth: '20%',
								itemStyle: {
									normal: {
										color: 'orange',
										barBorderRadius: 12
									}
								},
								selectedMode: 'single',
								label: {
									normal: {
										show: true,
										lineHeight: 10,
										formatter: '{c}' + unit,
										position: 'right',
										textStyle: {
											color: '#3b3c40',
											fontSize: 10
										}
									}
								}
							},
							{
								name: '内控',
								type: 'bar',
								data: [],
								barWidth: '20%',
								itemStyle: {
									normal: {
										color: '#41a863',
										barBorderRadius: 12
									}
								},
								selectedMode: 'single',
								label: {
									normal: {
										show: true,
										lineHeight: 10,
										formatter: '{c}' + unit,
										position: 'right',
										textStyle: {
											color: '#3b3c40',
											fontSize: 10
										}
									}
								}
							},
							{
								name: '实际',
								type: 'bar',
								data: [],
								barWidth: '20%',
								itemStyle: {
									normal: {
										color: '#0535d6',
										barBorderRadius: 12
									}
								},
								selectedMode: 'single',
								label: {
									normal: {
										show: true,
										lineHeight: 10,
										formatter: '{c}' + unit,
										position: 'right',
										textStyle: {
											color: '#3b3c40',
											fontSize: 10
										}
									}
								}
							}
						]
					}
					this.option.series[0].data = [res.tc_num, res.kg_num]
					this.option.series[1].data = [res.nkkg_num, res.nktc_num]
					this.option.series[2].data = [res.real_tc_num, res.real_kg_num]
				}
			},
			async projectCity() {
				// uni.showLoading({
				// 	title: '加载中...'
				// })
				let obj = {
					project_name: '',
					project_period: '2'
				}
				const {
					data
				} = await projectCityApi({
					...obj
				})
				let option = {
					grid: {
						left: '15px',
						right: '0',
						bottom: '0',
						top: '15px',
						containLabel: true
					},
					tooltip: {
						show: false
					},
					legend: {
						show: false
					},
					xAxis: {
						data: [],
						type: 'category',
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							interval: 0,
							rotate: 30,
							textStyle: {
								color: '#3b3c40',
								fontSize: 10
							}
						}
					},
					yAxis: {
						type: 'value',
						axisLine: {
							show: false
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#d9d9d7',
								type: 'dashed'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false,
							textStyle: {
								color: '#3b3c40',
								fontSize: 12
							}
						}
					},
					series: [{
						name: '数量',
						type: 'bar',
						data: [],
						barWidth: '30%',
						itemStyle: {
							normal: {
								color: '#95c4fa',
								barBorderRadius: 12
							}
						},
						selectedMode: 'single',
						label: {
							normal: {
								show: true,
								lineHeight: 10,
								formatter: '{c}',
								position: 'top',
								textStyle: {
									color: '#3b3c40',
									fontSize: 10
								}
							}
						}
					}]
				}
				let nameArr = []
				let dataArr = []
				for (let key in data.data) {
					nameArr.push(key)
					dataArr.push(data.data[key])
				}
				option.series[0].data = dataArr
				option.xAxis.data = nameArr
				this.option2 = option
				uni.hideLoading()
			},
			// 查询消息
			getErrorLogDataFun() {
				let obj = {}
				obj = {
					uid: this.userInfo.user_id,
					select_is_read: 0
				}
				UserMsgListApi({
					...obj
				}).then(res => {
					this.total_unread = res.data.data.total_unread
					if (this.resTotalUser == res.data.data.total_user) {
						
					} else {
						this.resTotalUser = res.data.data.total_user
						// #ifdef APP-PLUS
						if (res.data.data.push == 1) {
							plus.push.clear()
							uni.getSystemInfo({
								success(list) {
									if (list.brand == 'Xiaomi') {
										plus.runtime.setBadgeNumber(res.data.data.total_unread - 1)
									} else {
										plus.runtime.setBadgeNumber(res.data.data.total_unread)
									}
								}
							})
							// #ifdef APP-PLUS
								if (res.data.data.total_unread > 1) {
									plus.push.createMessage('您有多条信息未读 !')
							}else{
								plus.push.createMessage(res.data.data.data[0].msg)
							}
							// #endif
						}
						// #endif
						}
						if (res.data.data.data) {
							this.open()
							if (res.data.data.total_unread > 1) {
								this.listTitle[0].title = '消息提醒'
								this.listTitle[0].msg = '您有多条消息未读 ！'
								this.listTitle[0].id = res.data.data.data
									.map(obj => {
										return obj.id
									})
									.join(',')
								
							} else {
								this.listTitle = res.data.data.data
							}
						} else {
							this.show = false
						}
				})
			},
			// 弹框稍后再说
			later(params) {
				let obj = {}
				obj = {
					uid: this.userInfo.user_id,
					id: params.id,
					status: 2
				}
				UserMsgReadApi({
					...obj
				}).then(res => {
					this.total_unread = res.data.data.total
				})
				this.show = false
			},
			//  弹框已阅读
			// close(params) {
			// 	let obj={}
			// 	obj = {
			// 		uid:this.userInfo.user_id,
			// 		id: params.id,
			// 		status: 1,
			// 	}
			// 	UserMsgReadApi({...obj}).then(res=>{
			// 		this.total_unread=res.data.data.total
			// 	})
			// 	this.show = false
			// },
			//  打开弹框
			open() {
				this.show = true
			},
			// 跳转详情
			view_Details(item) {
				let obj = {}
				obj = {
					uid: this.userInfo.user_id,
					select_is_read: 2
				}
				UserMsgListApi({
					...obj
				}).then(res => {
					if (res.data.data.total_unread > 1) {
						uni.navigateTo({
							url: '/pages/statistics/mail/stationLetter'
						})
					} else {
						uni.navigateTo({
							url: '/pages/statistics/mail/messageDetails?id=' + encodeURIComponent(JSON
								.stringify(item.id))
						})
					}
				})
			},
			// 跳转提示列表
			godetails() {
				uni.navigateTo({
					url: '/pages/statistics/mail/stationLetter'
				})
			},
			// 发送cid
			ClientInfoAsync() {
				// #ifdef  APP-PLUS
				plus.push.getClientInfoAsync(info => {
					let cid = info['clientid']
					let obj = {}
					obj = {
						uid: this.userInfo.user_id,
						app_client_id: cid,
						app_os: 'android'
					}
					UserMsgregApi({
						...obj
					}).then(res => {})
				})
				// #endif
			}
		},
		created() {
			// 定时查询
			this.times = setInterval(() => {
				this.getErrorLogDataFun()
				console.log(213);
			}, 5000)

			this.times2 = setInterval(() => {
				this.ClientInfoAsync()
				console.log(987);
			}, 30000)
		},
		onHide(){
			if(this.times){
				clearInterval(this.times)
				this.times=null
			}
			if(this.times2){
				clearInterval(this.times2)
				this.times2=null
			}
		},
		onShow() {
			this.option = {}
			this.option2 = {}
			this.projectCharts()
			this.projectCity()
			this.getErrorLogDataFun()
			this.ClientInfoAsync()
			this.projectAnalysis()
		},
		onReady() {
			const res = uni.getSystemInfoSync()
			this.statusBarHeight = res.statusBarHeight
			this.date = new Date().valueOf()
			this.formattedDate = this.formatDate(this.date)
			this.projectAnalysis()
		},
		mounted() {
			this.projectCharts()
			this.projectCity()
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	let myChart2
	let _ownerInstance
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option)
				myChart.on('selectchanged', 'series', function(res) {
					_ownerInstance.callMethod('onProgressSelect', {
						res,
					})
					// {
					// 	"type": "selectchanged",
					// 	"selected": [{
					// 		"dataIndex": [4],
					// 		"seriesIndex": 0
					// 	}],
					// 	"isFromClick": true,
					// 	"fromAction": "select",
					// 	"fromActionPayload": {
					// 		"type": "select",
					// 		"dataIndexInside": 4,
					// 		"seriesIndex": 0,
					// 		"isFromClick": true
					// 	}
					// }
				});

				myChart2 = echarts.init(document.getElementById('echarts2'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart2.setOption(this.option2)
				myChart2.on('selectchanged', 'series', function(res) {
					_ownerInstance.callMethod('onEchartSelect', {
						res,
					})
					// {
					// 	"type": "selectchanged",
					// 	"selected": [{
					// 		"dataIndex": [4],
					// 		"seriesIndex": 0
					// 	}],
					// 	"isFromClick": true,
					// 	"fromAction": "select",
					// 	"fromActionPayload": {
					// 		"type": "select",
					// 		"dataIndexInside": 4,
					// 		"seriesIndex": 0,
					// 		"isFromClick": true
					// 	}
					// }
				});
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				let timer = setInterval(() => {
					if (myChart) {
						// myChart.dispatchAction({type: 'unselect', seriesIndex: 0, dataIndex: [0, 1]})
						// myChart.dispatchAction({type: 'unselect', seriesIndex: 1, dataIndex: [0, 1]})
						myChart.setOption(newValue)
						clearInterval(timer);
						timer = null;
					}
				}, 100);
			},
			updateEcharts2(newValue, oldValue, ownerInstance, instance) {
				if (!_ownerInstance) {
					_ownerInstance = ownerInstance
				}
				let timer = setInterval(() => {
					if (myChart2) {
						if (oldValue.xAxis) {
							let arr = []
							oldValue.xAxis.data.forEach((item, idx) => {
								arr.push(idx);
							})
							myChart2.dispatchAction({
								type: 'unselect',
								seriesIndex: 0,
								dataIndex: arr
							})
						}
						myChart2.setOption(newValue)
						clearInterval(timer);
						timer = null;
					}
				}, 100);
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		background-color: #fff;

		.tankuang {
			width: 90vw;
			border-radius: 30rpx;
			overflow: hidden;
			height: 600rpx;
			position: relative;

			.rise {
				width: 100%;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				color: #ffffff;
				font-size: 40rpx;
				background-color: #1534ce;
			}

			.title {
				text-align: center;
				font-size: 35rpx;
				font-weight: bold;
				margin: 20rpx 0;
			}

			.content {
				height: 300rpx;

				display: flex;
				margin: 0 50rpx;
				position: relative;

				.text {
					font-size: 30rpx;
					height: 245rpx;
					overflow: hidden;
				}

				.details {
					position: absolute;
					bottom: 0;
					right: 0;
					color: #007aff;
				}
			}

			.button {
				// border-radius: 20rpx;
				width: 90vw;
				position: absolute;
				bottom: 0;
				display: flex;

				button:first-child {
					width: 45vw;
					color: #ffffff;
					background-color: #1534ce;
					border-radius: 30rpx 0 0 30rpx;
					border-right: 1px solid #607cda;
				}

				button:nth-child(2) {
					width: 45vw;
					color: #ffffff;
					background-color: #1534ce;
					border-radius: 0 30rpx 30rpx 0;
					border-left: 1px solid #607cda;
				}
			}
		}
	}

	.section {
		position: relative;
		top: -50rpx;
		z-index: 10;
	}

	.section-1 {
		width: 100%;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		z-index: 20;
		position: relative;
		top: -100rpx;

		.top-tab {
			width: 100%;
			height: 52rpx;
			line-height: 52rpx;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 30rpx;
			margin-top: 15rpx;
			border-bottom: solid 3rpx #f2f2f0;

			.item {
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 50rpx;
				letter-spacing: 0rpx;
				color: #d8d8d5;
				position: relative;

				.shape {
					opacity: 0;
					transform: translateY(6rpx);
					position: absolute;
					bottom: -6rpx;
					width: 100%;
					height: 8rpx;
					background-color: #1534ce;
					border-radius: 8rpx;
					transition: 0.3s ease;
				}
			}

			.item__active {
				color: #3b3c40;

				.shape {
					opacity: 1;
					transform: translateY(0rpx);
				}
			}
		}

		.section-body {
			box-sizing: border-box;
			padding: 0 40rpx;
			padding-top: 30rpx;

			.date-picker {
				box-sizing: border-box;
				width: 100%;
				text-align: right;
				color: #3b3c40;
				font-size: 26rpx;
				height: 50rpx;
				line-height: 50rpx;

				text {
					font-size: 40rpx;
					color: #d8d8d5;
					position: relative;
					top: 6rpx;
				}
			}

			.charts {
				width: 100%;
				height: 300rpx;
				margin-bottom: 50rpx;
				padding-top: 30rpx;

				.echarts {
					width: 100%;
					height: 300rpx;
				}
			}

			.project-process {
				width: 671rpx;
				height: 100rpx;
				margin: 0 auto;
				text-align: center;
				margin-bottom: 40rpx;
				background-color: #0535d6;
				box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(51, 91, 222, 0.42);
				border-radius: 35rpx;

				image {
					width: 671rpx;
					height: 100rpx;
				}
			}

			.today {
				width: 100%;
				height: 40rpx;
				@include clear();
				margin-bottom: 20rpx;

				.left {
					height: 40rpx;
					float: left;
					font-size: 26rpx;
					font-weight: bold;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #3b3c40;
					border-bottom: 4rpx solid #87c6ff;
				}

				.right {
					float: right;
					color: #7f98ae;
					font-size: 26rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
			}

			.board {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-bottom: 70rpx;

				.item {
					position: relative;
					width: 157rpx;
					height: 211rpx;
					background-color: #0535d6;
					box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(51, 91, 222, 0.42);
					border-radius: 35rpx;

					image {
						width: 157rpx;
						height: 211rpx;
					}

					.desc {
						width: 157rpx;
						height: 60rpx;
						z-index: 10;
						text-align: center;
						position: absolute;
						bottom: 15rpx;
						line-height: 60rpx;

						.num {
							font-size: 50rpx;
							font-weight: bold;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: #ffffff;
							margin-right: 5rpx;
							white-space: nowrap;
						}

						text {
							font-size: 26rpx;
							font-weight: normal;
							letter-spacing: 0rpx;
							color: #87c6ff;
						}
					}
				}
			}

			.tab-list {
				width: 100%;
				background: #fff;
				border-radius: 35rpx;
				box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
				// margin-bottom: 65rpx;
				padding: 40rpx 0;
				@include clear();
				position: relative;

				.left {
					width: 227rpx;
					height: 100%;
					float: left;
					position: relative;
					z-index: 15;

					.top-wrapper {
						position: relative;
						width: 100%;
						margin-bottom: 90rpx;

						.shape {
							width: 120rpx;
							height: calc(100% + 20rpx);
							background-color: #1534cc;
							border-top-right-radius: 14rpx;
							border-bottom-right-radius: 14rpx;
							position: absolute;
							left: 0rpx;
							top: -10rpx;
							z-index: 1;
						}
					}

					.partyBuilding {
						height: 60rpx;
						float: left;
						margin-left: 15rpx;
						width: 80rpx;
						font-size: 26rpx;
						font-weight: bold;
						font-stretch: normal;
						line-height: 60rpx;
						letter-spacing: 0rpx;
						color: #3b3c40;
						transition: 0.3s ease;
					}

					.bottom-wrapper {
						position: relative;
						width: 100%;
						padding-top: 70rpx;

						.six {
							width: 120rpx;
							height: 80rpx;
							position: absolute;
							top: -10rpx;
							left: 0;
							border-top-right-radius: 14rpx;
							z-index: 6;
							overflow: hidden;

							image {
								width: 123rpx;
								height: 123rpx;
								position: absolute;
								top: -28rpx;
								right: -20rpx;
							}
						}

						.shape {
							width: 120rpx;
							height: calc(100% + 20rpx);
							background-color: #1534cc;
							border-top-right-radius: 14rpx;
							border-bottom-right-radius: 14rpx;
							position: absolute;
							left: 0rpx;
							top: -10rpx;
							z-index: 1;
						}
					}

					.item {
						position: relative;
						width: 158rpx;
						height: 90rpx;
						border-radius: 0rpx 14rpx 14rpx 0rpx;
						@include clear();
						z-index: 10;
						margin-bottom: 10rpx;
						margin-left: 30rpx;
						box-sizing: border-box;
						padding-top: 15rpx;
						padding-left: 12rpx;
						@include common-box-shadow();
						transition: 0.3s ease;

						&:last-child {
							margin-bottom: 0;
						}

						&::before {
							content: '';
							width: 8rpx;
							height: 50rpx;
							background-color: #0535d6;
							border-radius: 4rpx;
							position: absolute;
							right: -28rpx;
							top: 20rpx;
							transform: translateX(-7rpx);
							opacity: 0;
						}

						background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.2), #ffffff 6%, #ffffff 90%, #fff);

						.icon {
							float: left;
							margin-left: 0rpx;
							width: 52rpx;
							height: 52rpx;
							margin-top: 4rpx;
							transition: 0.3s ease;

							image {
								width: 52rpx;
								height: 52rpx;
							}
						}

						.name {
							height: 60rpx;
							float: left;
							margin-left: 15rpx;
							width: 80rpx;
							font-size: 26rpx;
							font-weight: bold;
							font-stretch: normal;
							line-height: 30rpx;
							letter-spacing: 0rpx;
							color: #3b3c40;
							transition: 0.3s ease;
						}
					}

					.item__disabled {
						.icon {
							filter: grayscale(100%);
						}

						.name {
							opacity: 0.25;
						}
					}

					.item__active {
						width: 175rpx;
						padding-left: 20rpx;

						&::before {
							opacity: 1;
							transform: translateX(0);
						}

						.icon {
							filter: grayscale(0%);
							opacity: 1;
						}

						.name {
							opacity: 1;
						}
					}
				}

				.mid {
					position: absolute;
					left: 227rpx;
					height: calc(100% - 80rpx);
					width: 5rpx;
					background-color: #f2f2f0;
				}

				.right {
					float: left;

					.item {
						margin-left: 32rpx;
						width: 383rpx;
						height: 69rpx;
						background-color: #f2f2fa;
						border-radius: 21rpx;
						text-align: center;
						line-height: 69rpx;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #3b3c40;
						margin-bottom: 17rpx;
					}

					.item__disabled {
						color: #dad9df;
					}
				}
			}
		}
	}

	.section-0 {
		width: 100%;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #0535d6;
		overflow: hidden;
		padding-bottom: 50rpx;

		.top {
			width: 100%;
			padding: 40rpx 0rpx;
			height: 30rpx;
			line-height: 30rpx;
			font-size: 26rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 30rpx;
			letter-spacing: 0rpx;
			color: #87c6ff;
			@include clear();

			.left {
				padding-left: 60rpx;
				float: left;
				display: flex;

				.iconfont {
					float: right;
					font-size: 26rpx;
					position: relative;
				}
			}

			.right {
				padding-right: 60rpx;
				float: right;
				text-align: right;

				.text-label {
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					height: 30rpx;
					line-height: 30rpx;
					letter-spacing: 0rpx;
					color: #86c6ff;
				}

				.text-value {
					height: 30rpx;
					line-height: 30rpx;
					font-size: 26rpx;
					font-weight: bold;
					letter-spacing: 0rpx;
					color: #fefefe;
				}
			}
		}
	}

	.tab-space {
		width: 100%;
		height: 40rpx;
		background-color: #fff;
	}

	.tab-bar {
		width: 100%;
		height: 70rpx;
		background-color: #2e5efe;
		padding-top: 20rpx;
		padding-bottom: 70rpx;
		@include clear();

		.title {
			float: left;
			height: 70rpx;
			font-size: 58rpx;
			font-weight: bold;
			font-stretch: normal;
			line-height: 70rpx;
			letter-spacing: 0rpx;
			color: #ffffff;
			padding-left: 60rpx;
		}

		.info {
			float: right;
			padding-right: 60rpx;

			.logo {
				float: left;
				width: 70rpx;
				height: 70rpx;
				background-color: #ffffff;
				border-radius: 14rpx;
				box-sizing: border-box;
				padding: 4rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.notice {
				float: left;
				margin-right: 20rpx;
				position: relative;
				margin-top: 14rpx;

				.iconfont {
					font-size: 40rpx;
					color: #fff;
				}

				.count {
					min-width: 25rpx;
					height: 25rpx;
					background-color: #ffde00;
					border: solid 3rpx #2e5efe;
					position: absolute;
					right: -15rpx;
					top: -10rpx;
					border-radius: 20rpx;
					color: #2e5efe;
					z-index: 10;
					text-align: center;
					line-height: 25rpx;
					font-size: 13rpx;
				}
			}
		}
	}
</style>
